<template>
	<div>
		<div style="width:40%; height: 600px;background: white;">
			<div style="text-align: center;padding: 20px;">
				<el-button type="success" icon="el-icon-plus" circle @click="add"></el-button>
				<el-button type="danger" icon="el-icon-delete" circle @click="del"></el-button>
				<el-button type="warning" icon="el-icon-edit" circle @click="edit"></el-button>
				<el-button type="primary" icon="el-icon-refresh-left" circle @click="refresh"></el-button>
			</div>
			<el-tree :props="props" :load="loadNode" lazy @node-click="onclick"></el-tree>
		</div>
		<el-dialog title="部门信息" :visible.sync="dialogFormVisible" :destroy-on-close="destroy" :show-close="isShowClose">
		  <el-form :model="form">
			<el-form-item label="部门简称" :label-width="formLabelWidth">
			  <el-input v-model="form.simplename" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="部门全称" :label-width="formLabelWidth">
			  <el-input v-model="form.fullname" auto-complete="off"></el-input>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
			<el-button @click="cancel">取 消</el-button>
			<el-button type="primary" @click="save">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
        dialogFormVisible: false,
        form: {
          simplename: '',
          fullname: '',
		  parentPk:''
        },
        formLabelWidth: '80px',
		destroy:true,
		isShowClose:false,
		saveOrUpdate:1,//来区别是新增还是编辑
		node:"",
		resolve:""
      };
    },
    methods: {
		loadNode(node, resolve) {
			this.node=node;
			this.resolve=resolve;
			if (node.level === 0) {
			  return resolve([{ pk:"1",name: '上海新达五金有限公司'}]);
			}
			this.getAxios("sysDeptment/treeList?parentPk="+node.data.pk).then(resp=>{
				if(resp.code==200){
					resolve (resp.data);
				}
			})
		},
		onclick(data,node){
			this.form.parentPk=data.pk;
		},
		add(){
			if(this.form.parentPk==""){
				this.$message.error("请选择节点");
				return;
			}
			this.dialogFormVisible=true;
			this.saveOrUpdate=1;
		},
		del(){
			if(this.form.parentPk==""){
				this.$message.error("请选择要删除项");
				return;
			}
			this.$confirm('确定要删除吗, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				this.getAxios("sysDeptment/delete/"+this.form.parentPk).then(resp=>{
					if(resp.code==200){
						this.$message.success(resp.message);
						this.refresh();
					}else{
						this.$message.error(resp.message);
					}
				})
			}).catch(() => {
			  this.$message({
				type: 'info',
				message: '已取消删除'
			  });          
			});
		},
		edit(){
			if(this.form.parentPk==""){
				this.$message.error("请选择节点");
				return;
			}
			this.dialogFormVisible=true;
			this.saveOrUpdate=2;
			this.getAxios("sysDeptment/query/"+this.form.parentPk).then(resp=>{
				if(resp.code==200){
					this.form=resp.data
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		refresh(){
			window.location.reload();
		},
		save(){//保存或修改部门
			var url=null;
			if(this.saveOrUpdate==1){
				url="sysDeptment/save";
			}else{
				url="sysDeptment/update";
			}
			this.postAxios(url,this.form).then(resp=>{
				if(resp.code==200){
					this.$message.success(resp.message);
					if(this.saveOrUpdate==1){
						this.form={}
						this.dialogFormVisible=false;
						this.refresh();
					}
				}else{
					this.$message.success(resp.message);
				}
			})
		},
		cancel(){//取消
			this.dialogFormVisible=false;
			this.form={};
		}
    }
  };
</script>

<style>
</style>
